<template>
  <div class="app-all-order">
    <FilterForm @searchTable="getAfterSaleTable" />
    <AfterSaleTable :table-res="tableRes" @getTable="getAfterSaleTable" />
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, provide, toRefs, onMounted } from 'vue'
import { filterKeys } from './components/tableConfig'
import { getAfterSaleTableData } from '@/api/order/order'
import FilterForm from './components/FilterForm.vue'
import AfterSaleTable from './components/AfterSaleTable.vue'
import { filterParams } from '@/utils/formMethod'

export default defineComponent({
  components: {
    FilterForm,
    AfterSaleTable,
  },
  setup() {
    const state = reactive({
      params: {
        current: 1,
        size: 5,
        refundType: 0,
        status: 0,
        interveneStatus: 0,
        manner: 0,
      },
      tableRes: {},
    })
    const getAfterSaleTable = async () => {
      try {
        const params = filterParams(filterKeys, state.params)
        const data = await getAfterSaleTableData(params)
        state.tableRes = data
      } catch (err) {
        throw err
      }
    }
    provide('params', state.params)
    onMounted(() => {
      getAfterSaleTable()
    })
    return {
      ...toRefs(state),
      getAfterSaleTable,
    }
  },
})
</script>

<style lang="scss" scoped>
.app-all-order {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 15px;
}
</style>
